<template>
  <el-card>
    <el-form
      ref="searchForm"
      :inline="true"
      :model="searchFormModel"
      label-width="undefined"
      size="small"
      @submit.prevent>
      <el-form-item :label="$t('forms.processInstanceId')" prop="processInstanceId">
        <el-input
          v-model="searchFormModel.processInstanceId"
          :disabled="modal_loading"
          :placeholder="$t('forms.pleaseEnter') + $t('forms.processInstanceId')"
          @keyup.enter="handleSearch" />
      </el-form-item>
      <el-form-item :label="$t('forms.processBusinessKey')" prop="processBusinessKey">
        <el-input
          v-model="searchFormModel.processBusinessKey"
          :disabled="modal_loading"
          :placeholder="$t('forms.pleaseEnter') + $t('forms.processBusinessKey')"
          @keyup.enter="handleSearch" />
      </el-form-item>
      <el-form-item :label="$t('forms.flowStatus')" prop="finished" style="width: 200px">
        <el-select
          v-model="searchFormModel.flowStatus"
          :disabled="modal_loading"
          value=""
          clearable>
          <el-option
            v-for="item in flowStatusList"
            :key="'search_select_' + item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="float: right">
        <el-button-group>
          <el-button :loading="modal_loading" type="primary" @click="handleSearch">
            {{ $t('forms.buttons.search') }}
          </el-button>
          <el-button :loading="modal_loading" type="primary" @click="handleSearchReset">
            {{ $t('forms.buttons.reset') }}
          </el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-table
      ref="table"
      v-loading="modal_loading"
      :data="searchData"
      :empty-text="$t('messages.tableNoData')"
      :height="tableHeight"
      border
      header-cell-class-name="query-table-header"
      size="small">
      <el-table-column
        :label="$t('forms.processBusinessKey')"
        :show-overflow-tooltip="true"
        prop="businessKey">
      </el-table-column>
      <el-table-column :label="$t('forms.beginTime')" prop="startTime" width="150">
        <template #default="scope">
          <span>{{ dateTimeFormat(scope.row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('forms.flowName')" :show-overflow-tooltip="true" prop="flowName">
      </el-table-column>
      <el-table-column :label="$t('forms.title')" :show-overflow-tooltip="true" prop="title">
      </el-table-column>
      <el-table-column
        :label="$t('forms.description')"
        :show-overflow-tooltip="true"
        prop="description">
      </el-table-column>
      <el-table-column :label="$t('forms.updateTime')" prop="updateTime" width="150">
        <template #default="scope">
          <span>{{ scope.row.updateTime > 0 ? dateTimeFormat(scope.row.updateTime) : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('forms.flowStatus')" prop="isFinished" width="80">
        <template #default="scope">
          <span>{{ selectText(flowStatusList, scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('forms.currentUser')" :show-overflow-tooltip="true">
        <template #default="scope">
          <span>{{
            scope.row.activityUser
              .map((user) => {
                return user.name + '（' + user.loginNo + '）'
              })
              .join(',')
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :fixed="isMobile ? false : 'right'"
        :label="$t('forms.action')"
        align="center"
        prop="action"
        width="80">
        <template #default="scope">
          <el-tooltip :content="$t('forms.buttons.view')" placement="bottom-end">
            <el-button link type="primary" @click="gotoFlowView(scope.row)">
              <el-icon size="15px">
                <el-icon-search />
              </el-icon>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 5px"
      v-model:current-page="searchFormModel.currPage"
      v-model:page-size="searchFormModel.pageSize"
      :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
      :page-sizes="searchFormModel.pageSizeArray"
      :size="isMobile ? 'small' : 'default'"
      :total="searchFormModel.totalRows"
      @size-change="handlePageSizeSearch">
    </el-pagination>
    <el-dialog
      v-model="viewModal"
      :fullscreen="true"
      :title="$t('forms.info')"
      class="process-dialog">
      <div>
        <el-card shadow="hover">
          <template #header>
            <span>{{ $t('forms.basicInfo') }}</span>
            <el-icon color="#409EFF" style="margin-left: 5px">
              <el-icon-info-filled />
            </el-icon>
          </template>
          <el-form :inline="true" :model="currObj" label-width="auto" size="small" @submit.prevent>
            <el-row :gutter="10">
              <el-col :lg="{ span: 8 }">
                <el-form-item :label="$t('forms.processInstanceId') + ':'" prop="processInstanceId">
                  <span>{{ currObj.processInstanceId }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="{ span: 8 }">
                <el-form-item :label="$t('forms.processBusinessKey') + ':'" prop="businessKey">
                  <span>{{ currObj.businessKey }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :lg="{ span: 8 }">
                <el-form-item :label="$t('forms.processKey') + ':'" prop="processDefinitionKey">
                  <span>{{ currObj.processDefinitionKey }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="{ span: 8 }">
                <el-form-item :label="$t('forms.flowName') + ':'" prop="flowName">
                  <span>{{ currObj.flowName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="{ span: 8 }">
                <el-form-item :label="$t('forms.title') + ':'" prop="title">
                  <span>{{ currObj.title }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="{ span: 8 }">
                <el-form-item :label="$t('forms.isFinished') + ':'" prop="finished">
                  <span :style="{ color: currObj.finished ? 'green' : 'red' }">{{
                    currObj.finished ? $t('forms.yes') : $t('forms.no')
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="{ span: 8 }">
                <el-form-item :label="$t('forms.beginTime') + ':'" prop="startTime">
                  <span>{{ dateTimeFormat(currObj.startTime) }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="{ span: 8 }">
                <el-form-item :label="$t('forms.updateTime') + ':'" prop="updateTime">
                  <span>{{ dateTimeFormat(currObj.updateTime) }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="{ span: 8 }">
                <el-form-item :label="$t('forms.startUser') + ':'" prop="startUser">
                  <span>{{
                    currObj.startUser && currObj.startUser.name
                      ? currObj.startUser.name + '（' + currObj.startUser.loginNo + '）'
                      : ''
                  }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="{ span: 8 }">
                <el-form-item
                  :label="$t('forms.currentUser') + ':'"
                  prop="activityUser"
                  :show-overflow-tooltip="true">
                  <span>{{
                    currObj.activityUser
                      ? currObj.activityUser
                          .map((item) => {
                            return item.name + '（' + item.loginNo + '）'
                          })
                          .join(',')
                      : ''
                  }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-form :model="currObj" label-width="auto" size="small" @submit.prevent>
            <el-row :gutter="10">
              <el-col :lg="{ span: 24 }">
                <el-form-item :label="$t('forms.description') + ':'" prop="description">
                  <el-input v-model="currObj.description" :rows="3" readonly type="textarea" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row>
            <el-col :lg="{ span: 24 }">
              <el-collapse>
                <el-collapse-item>
                  <template #title>
                    <span>{{ $t('forms.processParams') }}</span>
                    <el-icon color="#409EFF" style="margin-left: 5px">
                      <el-icon-info-filled />
                    </el-icon>
                  </template>
                  <el-table :data="params" :stripe="true" size="small">
                    <el-table-column align="center" type="index" width="50"></el-table-column>
                    <el-table-column :label="$t('forms.name')" prop="name"></el-table-column>
                    <el-table-column :label="$t('forms.type')" prop="type"></el-table-column>
                    <el-table-column :label="$t('forms.value')" prop="value"></el-table-column>
                  </el-table>
                </el-collapse-item>
              </el-collapse>
            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="hover" style="margin-top: 10px">
          <template #header>
            <span>{{ $t('forms.processActivityRecords') }}</span>
            <el-icon color="#409EFF" style="margin-left: 5px">
              <el-icon-info-filled />
            </el-icon>
          </template>
          <el-table
            v-loading="activity_loading"
            :data="processActivityList"
            :stripe="true"
            size="small">
            <el-table-column :label="$t('forms.name')" prop="nodeName"></el-table-column>
            <el-table-column :label="$t('forms.processUser')">
              <template #default="scope">
                <span>{{ scope.row.user.name + '（' + scope.row.user.loginNo + '）' }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="'操作类型'" prop="skipType">
              <template #default="scope">
                <span :style="{ color: scope.row.skipType === 'PASS' ? 'green' : 'red' }">{{
                  selectText(skipTypeList, scope.row.skipType)
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('forms.comment')"
              :show-overflow-tooltip="true"
              prop="message">
              <template #default="scope">
                <span style="white-space: pre-line">{{ scope.row.message }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('forms.beginTime')" prop="createTime">
              <template #default="scope">
                <span>{{ dateTimeFormat(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('forms.updateTime')" prop="updateTime">
              <template #default="scope">
                <span>{{ dateTimeFormat(scope.row.updateTime) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card shadow="hover" style="margin-top: 10px">
          <template #header>
            <span>{{ $t('forms.task') }}</span>
            <el-icon color="#409EFF" style="margin-left: 5px">
              <el-icon-info-filled />
            </el-icon>
          </template>
          <el-table v-loading="task_loading" :data="processTaskList" :stripe="true" size="small">
            <el-table-column :label="$t('forms.code')" prop="nodeCode"></el-table-column>
            <el-table-column :label="$t('forms.name')" prop="nodeName"></el-table-column>
            <el-table-column :label="$t('forms.currentUser')">
              <template #default="scope">
                <span>{{
                  scope.row.pendingUserList
                    .map((user) => {
                      return user.name + '（' + user.loginNo + '）'
                    })
                    .join(',')
                }}</span>
              </template>
            </el-table-column>
            <el-table-column :label="$t('forms.createTime')" prop="createTime">
              <template #default="scope">
                <span>{{ dateTimeFormat(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :fixed="isMobile ? false : 'right'"
              :label="$t('forms.action')"
              align="center"
              prop="action"
              width="80">
              <template #default="scope">
                <el-tooltip :content="$t('forms.buttons.view')" placement="bottom-end">
                  <el-button link type="primary" @click="gotoTaskView(scope.row)">
                    <el-icon size="15px">
                      <el-icon-search />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <template #footer>
        <div style="text-align: left">
          <el-button
            v-if="!currObj.finished"
            :loading="modal_loading"
            type="primary"
            @click="gotoFlowChartView">
            {{ $t('forms.buttons.view') + $t('forms.buttons.image') }}
          </el-button>
          <el-button
            v-if="!currObj.finished"
            :loading="modal_loading"
            type="danger"
            @click="termination">
            {{ $t('forms.buttons.terminate') }}
          </el-button>
        </div>
      </template>
      <el-backtop :visibility-height="10" target=".process-dialog" />
    </el-dialog>
    <el-dialog v-model="taskModal" :fullscreen="true" :title="$t('forms.info')" class="task-dialog">
      <el-form :inline="true" :model="currTaskObj" label-width="auto" size="small" @submit.prevent>
        <el-row :gutter="10">
          <el-col :lg="{ span: 8 }">
            <el-form-item :label="$t('forms.task') + ' id:'" prop="taskId">
              <span>{{ currTaskObj.taskId }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="{ span: 8 }">
            <el-form-item :label="$t('forms.name') + ':'" prop="nodeName">
              <span>{{ currTaskObj.nodeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="{ span: 8 }">
            <el-form-item :label="$t('forms.task') + $t('forms.key') + ':'" prop="nodeCode">
              <span>{{ currTaskObj.nodeCode }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :lg="{ span: 8 }">
            <el-form-item :label="$t('forms.currentUser') + ':'" prop="pendingUser">
              <span>{{
                currTaskObj.pendingUserList
                  .map((user) => {
                    return user.name + '（' + user.loginNo + '）'
                  })
                  .join(',')
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="{ span: 8 }">
            <el-form-item :label="$t('forms.createTime') + ':'" prop="createTime">
              <span>{{ dateTimeFormat(currTaskObj.createTime) }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col :lg="{ span: 24 }">
          <el-collapse>
            <el-collapse-item>
              <template #title>
                <span>{{ $t('forms.pendingUser') }}</span>
                <el-icon color="#409EFF" style="margin-left: 5px">
                  <el-icon-info-filled />
                </el-icon>
              </template>
              <el-table :data="currTaskObj.pendingUserList" :stripe="true" size="small">
                <el-table-column align="center" type="index" width="50"></el-table-column>
                <el-table-column :label="'id'" prop="id"></el-table-column>
                <el-table-column :label="$t('forms.userName')" prop="name"></el-table-column>
                <el-table-column :label="$t('forms.loginNo')" prop="loginNo"></el-table-column>
                <el-table-column :label="$t('forms.type')" prop="remark"></el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
      <template #footer>
        <div style="text-align: left">
          <el-button :loading="modal_loading" type="primary" @click="processTask(2)">
            {{ $t('forms.buttons.transfer') }}
          </el-button>
        </div>
      </template>
      <el-backtop :visibility-height="10" target=".task-dialog" />
    </el-dialog>
    <el-dialog
      v-model="selectUserModal"
      :close-on-click-modal="false"
      :fullscreen="isMobile"
      :title="$t('forms.user')">
      <el-form ref="editForm" v-loading="modal_loading" :model="editFormModel" @submit.prevent>
        <el-form-item
          :show-message="false"
          :label="$t('forms.buttons.select') + $t('forms.user')"
          prop="selectUserResult"
          required>
          <el-select
            v-model="editFormModel.selectUserResult"
            :loading="modal_loading"
            :remote-method="remoteSelectUser"
            filterable
            :placeholder="'请输入登录账号或名称'"
            remote
            style="width: 100%"
            value-key="id">
            <el-option
              v-for="item in userOptions"
              :key="'select_user_' + item.id"
              :label="item.name + '(' + item.loginNo + ')'"
              :value="item" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="text-align: center">
          <el-button :loading="modal_loading" type="info" @click="doCancel">
            {{ $t('forms.buttons.cancel') }}
          </el-button>
          <el-button :loading="modal_loading" type="warning" @click="doReset">
            {{ $t('forms.buttons.reset') }}
          </el-button>
          <el-button :loading="modal_loading" type="primary" @click="doProcessTask">
            {{ $t('forms.buttons.submit') }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="terminationModal"
      :close-on-click-modal="false"
      :fullscreen="isMobile"
      :title="$t('forms.buttons.terminate')">
      <el-form
        ref="terminationForm"
        v-loading="modal_loading"
        :model="terminationFormModel"
        :rules="terminationRule"
        @submit.prevent>
        <el-form-item :label="$t('forms.deleteReason')" prop="reason">
          <el-input
            v-model="terminationFormModel.reason"
            :disabled="modal_loading"
            :placeholder="$t('forms.pleaseEnter') + $t('forms.deleteReason')"
            :rows="3"
            type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="text-align: center">
          <el-button :loading="modal_loading" type="info" @click="doCancelTermination">
            {{ $t('forms.buttons.cancel') }}
          </el-button>
          <el-button :loading="modal_loading" type="primary" @click="doTermination">
            {{ $t('forms.buttons.terminate') }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="bpmnView" :title="$t('forms.buttons.image')" fullscreen>
      <iframe
        :key="flowChartUrl"
        :src="flowChartUrl"
        :style="{ border: '1px solid #606266', width: '100%', height: bpmnHeight + 'px' }" />
    </el-dialog>
  </el-card>
</template>
<script>
import { isMobileDevice } from '@/libs/tools'
import moment from 'moment'
import { nextTick, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '@/stores/app'

export default {
  name: 'workflowManager',
  data() {
    return {
      searchFormModel: {
        processInstanceId: '',
        processBusinessKey: '',
        flowStatus: '',
        currPage: 1,
        totalRows: 0,
        pageSize: 10,
        pageSizeArray: [10, 20, 30, 40]
      },
      modal_loading: false,
      activity_loading: false,
      task_loading: false,
      viewModal: false,
      taskModal: false,
      selectUserModal: false,
      terminationModal: false,
      bpmnView: false,
      processType: 1,
      currObj: {},
      currTaskObj: {
        user: {},
        taskOwnerUser: {},
        localParams: {}
      },
      processActivityList: [],
      processTaskList: [],
      searchData: [],
      params: [],
      formFields: [],
      userOptions: [],
      editFormModel: {
        selectUserResult: ''
      },
      terminationFormModel: {
        reason: ''
      },
      flowChartUrl: ''
    }
  },
  computed: {
    isMobile() {
      return isMobileDevice()
    },
    tableHeight() {
      const minHeight = 300
      const height = this.appStore.mainHeight - 80 - 92 - 4
      if (height < minHeight) {
        return minHeight - 2
      } else {
        return height
      }
    },
    bpmnHeight() {
      return this.appStore.mainHeight + 20
    },
    flowStatusList() {
      return [
        { value: '0', label: '待提交' },
        { value: '1', label: '审批中' },
        { value: '2', label: '审批通过' },
        { value: '3', label: '自动通过' },
        { value: '4', label: '终止' },
        { value: '5', label: '作废' },
        { value: '6', label: '撤销' },
        { value: '7', label: '取回' },
        { value: '8', label: '已完成' },
        { value: '9', label: '已退回' },
        { value: '10', label: '失效' },
        { value: '11', label: '拿回' }
      ]
    },
    skipTypeList() {
      return [
        { value: 'PASS', label: '审批通过' },
        { value: 'REJECT', label: '退回' },
        { value: 'NONE', label: '无动作' }
      ]
    },
    terminationRule() {
      return {
        reason: [
          {
            required: true,
            message: this.t('forms.deleteReason') + this.t('forms.notEmpty'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    'searchFormModel.currPage'() {
      this.handleSearch()
    },
    viewModal(isShow) {
      if (!isShow) {
        this.handleSearch()
      }
    }
  },
  methods: {
    dateTimeFormat(time) {
      return time ? moment(time).format('YYYY-MM-DD HH:mm:ss') : ''
    },
    selectText(list, value) {
      const filter = list.filter((item) => {
        return item.value === value
      })
      if (filter.length > 0) {
        return filter[0].label
      } else {
        return ''
      }
    },
    handlePageSizeSearch(size) {
      this.searchFormModel.pageSize = size
      this.handleSearch()
    },
    handleSearchReset() {
      this.searchForm.resetFields()
    },
    handleSearch() {
      let searchParam = {
        processInstanceId: this.searchFormModel.processInstanceId,
        processBusinessKey: this.searchFormModel.processBusinessKey,
        flowStatus: this.searchFormModel.flowStatus,
        queryParam: {
          currPage: this.searchFormModel.currPage,
          pageSize: this.searchFormModel.pageSize
        }
      }
      this.modal_loading = true
      this.$api.request.workFlow
        .queryInstance(searchParam)
        .then((res) => {
          this.modal_loading = false
          if (res) {
            this.searchFormModel.totalRows = res.data.totalElements
            this.searchData = res.data.content
            nextTick(() => {
              this.table.doLayout()
            })
          }
        })
        .catch(() => {
          this.searchData = []
          this.modal_loading = false
        })
    },
    gotoFlowView(processInstance) {
      this.viewModal = true
      this.currObj = processInstance
      this.params = []
      Object.keys(this.currObj.params).forEach((item) => {
        const value = this.currObj.params[item]
        this.params.push({
          name: item,
          type: typeof value,
          value: String(value)
        })
      })
      nextTick(() => {
        this.doInitData(this.currObj.processInstanceId)
      })
    },
    gotoTaskView(processTask) {
      this.taskModal = true
      this.currTaskObj = processTask
    },
    doInitData(processInstanceId) {
      const promiseInit = []
      // 获取流程处理记录
      promiseInit.push(
        Promise.resolve().then(() => {
          this.activity_loading = true
          this.processActivityList = []
          this.$api.request.workFlow
            .getInstanceActivity(processInstanceId)
            .then((res) => {
              this.activity_loading = false
              if (res) {
                this.processActivityList = res.data
              }
            })
            .catch(() => {
              this.activity_loading = false
            })
        })
      )
      // 获取流程任务列表
      promiseInit.push(
        Promise.resolve().then(() => {
          this.task_loading = true
          this.processTaskList = []
          this.$api.request.workFlow
            .getTaskList(processInstanceId)
            .then((res) => {
              this.task_loading = false
              if (res) {
                this.processTaskList = res.data
              }
            })
            .catch(() => {
              this.task_loading = false
            })
        })
      )
      Promise.all(promiseInit)
    },
    processTask(processType) {
      this.selectUserModal = true
      this.processType = processType
    },
    doProcessTask() {
      if (!this.editFormModel.selectUserResult || !this.editFormModel.selectUserResult.id) {
        this.$alert(
          this.t('forms.user') + this.t('forms.notEmpty'),
          this.t('messages.validateFailed'),
          {
            type: 'error',
            callback: () => {}
          }
        )
        return
      }
      switch (this.processType) {
        case 2:
          this.$confirm(
            '确定转办流程任务【' + this.currTaskObj.nodeName + '】?',
            this.t('dialog.confirm') + '',
            {
              type: 'warning'
            }
          )
            .then(() => {
              this.modal_loading = true
              this.$api.request.workFlow
                .distributeTask(this.currTaskObj.taskId, this.editFormModel.selectUserResult.id)
                .then((res) => {
                  this.modal_loading = false
                  if (res) {
                    this.$message.success(this.t('messages.requestSuccess') + '')
                    this.selectUserModal = false
                    this.taskModal = false
                    this.doInitData(this.currObj.processInstanceId)
                  }
                })
                .catch(() => {
                  this.modal_loading = false
                })
            })
            .catch(() => {})
          break
      }
    },
    remoteSelectUser(query) {
      if (query && query !== '') {
        this.$api.request.user.getUserList(query).then((res) => {
          if (res) {
            this.userOptions = res.data
          }
        })
      }
    },
    doCancel() {
      this.selectUserModal = false
    },
    doReset() {
      this.editForm.resetFields()
    },
    termination() {
      this.terminationModal = true
    },
    doCancelTermination() {
      this.terminationModal = false
    },
    doTermination() {
      this.terminationForm.validate((valid) => {
        if (valid) {
          this.$confirm(
            '确定终止流程【' + this.currObj.flowName + '】?',
            this.t('dialog.confirm'),
            {
              type: 'warning'
            }
          )
            .then(() => {
              this.modal_loading = true
              this.$api.request.workFlow
                .terminationInstance(
                  this.currObj.processInstanceId,
                  this.terminationFormModel.reason
                )
                .then((res) => {
                  this.modal_loading = false
                  if (res) {
                    this.$message.success(this.t('messages.requestSuccess'))
                    this.terminationModal = false
                    this.viewModal = false
                  }
                })
                .catch(() => {
                  this.modal_loading = false
                })
            })
            .catch(() => {})
        }
      })
    },
    gotoFlowChartView() {
      this.bpmnView = true
      nextTick(() => {
        this.flowChartUrl =
          this.appStore.appInfo.baseURL +
          `/warm-flow-ui/index.html?id=${this.currObj.processInstanceId}&type=FlowChart`
      })
    }
  },
  mounted() {
    this.handleSearch()
  },
  activated() {
    nextTick(() => {
      this.table.doLayout()
    })
  },
  setup() {
    const searchForm = ref(null)
    const table = ref(null)
    const editForm = ref(null)
    const terminationForm = ref(null)
    const { t } = useI18n()
    const appStore = useAppStore()
    return { searchForm, table, editForm, terminationForm, t, appStore }
  }
}
</script>
